<div class="builder-version p-x-xs p-y-xs">
  <mat-accordion>
    <mat-expansion-panel [expanded]="true">
      <mat-expansion-panel-header>
        <mat-panel-title>
          <span>历史记录 ({{ version?.length || 0 }})</span>
        </mat-panel-title>
      </mat-expansion-panel-header>
      <mat-list>
        @if (version?.length) {
          @for (version of version; track version; let i = $index) {
            <mat-list-item matRipple (click)="onVersion(version, i)">
              @if (!version.current) {
                <mat-icon matListItemIcon>radio_button_unchecked</mat-icon>
              }
              @if (version.current) {
                <mat-icon matListItemIcon color="primary"> radio_button_checked </mat-icon>
              }
              <div
                class="title"
                (blur)="onUpdateTitle($event, i)"
                (click)="onClickTitle($event)"
                matListItemTitle
                contenteditable="true"
              >
                <span class="text-sm">
                  {{ version.title }}
                </span>
              </div>
              <div class="time text-xs font-mono" matListItemLine>
                {{ version.time | date: 'yyyy/MM/dd HH:mm:ss' }}
              </div>
              @if (i > 0) {
                <app-btn
                  (click)="onDelete(i)"
                  class="delete"
                  [matTooltip]="'删除'"
                  [content]="{
                    mode: 'icon',
                    color: 'warn',
                    icon: { svg: 'trash-can-outline' },
                  }"
                />
              }
            </mat-list-item>
          }
        }
      </mat-list>
      <mat-action-row>
        <app-btn
          (click)="onClearHistory()"
          [content]="{
            label: '清空所有',
            color: 'warn',
            icon: { svg: 'delete-empty-outline' },
          }"
        />
        <app-btn
          (click)="onNewPage()"
          [content]="{
            label: '新建页面',
            color: 'primary',
            icon: { svg: 'pencil-plus', inline: true },
          }"
        />
      </mat-action-row>
    </mat-expansion-panel>
  </mat-accordion>
</div>
